<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body form" [formGroup]="form">
        <div class="box">
          <h1 class="box-header" id="settingsTitle">
            {{ "settingsTitle" | i18n: currentUserEmail }}
          </h1>
          <div class="box-content box-content-padded">
            <h2>
              <button
                id="app-settings"
                type="button"
                class="box-header-expandable"
                (click)="showSecurity = !showSecurity"
                [attr.aria-expanded]="showSecurity"
                appAutofocus
              >
                <i
                  *ngIf="!showSecurity"
                  class="bwi bwi-angle-right bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showSecurity"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                {{ "security" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showSecurity">
              <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
                <span *ngIf="policy.timeout && policy.action">
                  {{
                    "vaultTimeoutPolicyWithActionInEffect"
                      | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n)
                  }}
                </span>
                <span *ngIf="policy.timeout && !policy.action">
                  {{
                    "vaultTimeoutPolicyInEffect"
                      | i18n: policy.timeout.hours : policy.timeout.minutes
                  }}
                </span>
                <span *ngIf="!policy.timeout && policy.action">
                  {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
                </span>
              </app-callout>
              <app-vault-timeout-input
                [vaultTimeoutOptions]="vaultTimeoutOptions"
                [formControl]="form.controls.vaultTimeout"
                ngDefaultControl
              ></app-vault-timeout-input>
              <ng-container
                *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions"
              >
                <div class="form-group">
                  <label>{{ "vaultTimeoutAction" | i18n }}</label>
                  <div class="radio radio-mt-2">
                    <label for="vaultTimeoutActionLock">
                      <!--
                        Using [attr.disabled] because reactive forms don't support disabling individual radio buttons, see:
                        https://github.com/angular/angular/issues/11763
                      -->
                      <input
                        type="radio"
                        id="vaultTimeoutActionLock"
                        value="{{ VaultTimeoutAction.Lock }}"
                        aria-describedby="vaultTimeoutActionLockHelp"
                        formControlName="vaultTimeoutAction"
                        [attr.disabled]="
                          !availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)
                            ? true
                            : null
                        "
                      />
                      {{ "lock" | i18n }}
                    </label>
                  </div>
                  <small id="vaultTimeoutActionLockHelp" class="help-block">{{
                    "vaultTimeoutActionLockDesc" | i18n
                  }}</small>
                  <div class="radio">
                    <label for="vaultTimeoutActionLogOut">
                      <input
                        type="radio"
                        id="vaultTimeoutActionLogOut"
                        value="{{ VaultTimeoutAction.LogOut }}"
                        aria-describedby="vaultTimeoutActionLogOutHelp"
                        formControlName="vaultTimeoutAction"
                        [attr.disabled]="
                          !availableVaultTimeoutActions.includes(VaultTimeoutAction.LogOut)
                            ? true
                            : null
                        "
                      />
                      {{ "logOut" | i18n }}
                    </label>
                  </div>
                  <small id="vaultTimeoutActionLogOutHelp" class="help-block">{{
                    "vaultTimeoutActionLogOutDesc" | i18n
                  }}</small>
                </div>
                <div
                  *ngIf="!availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
                  class="form-group"
                >
                  <small id="unlockMethodNeededToChangeTimeoutActionHelp" class="help-block">{{
                    "unlockMethodNeededToChangeTimeoutActionDesc" | i18n
                  }}</small>
                </div>
              </ng-container>
              <div class="form-group">
                <div class="checkbox">
                  <label for="pin">
                    <input id="pin" type="checkbox" formControlName="pin" />
                    {{ "unlockWithPin" | i18n }}
                  </label>
                </div>
              </div>
              <div class="form-group" *ngIf="supportsBiometric">
                <div class="checkbox">
                  <label for="biometric">
                    <input id="biometric" type="checkbox" formControlName="biometric" />
                    {{ biometricText | i18n }}
                  </label>
                </div>
                <small class="help-block" *ngIf="this.form.value.biometric">{{
                  additionalBiometricSettingsText | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="supportsBiometric && this.form.value.biometric">
                <div class="checkbox form-group-child">
                  <label for="autoPromptBiometrics">
                    <input
                      id="autoPromptBiometrics"
                      type="checkbox"
                      formControlName="autoPromptBiometrics"
                      (change)="updateAutoPromptBiometrics()"
                    />
                    {{ autoPromptBiometricsText | i18n }}
                  </label>
                </div>
              </div>
              <div
                class="form-group"
                *ngIf="
                  supportsBiometric &&
                  this.form.value.biometric &&
                  (userHasMasterPassword || (this.form.value.pin && userHasPinSet))
                "
              >
                <div class="checkbox form-group-child">
                  <label for="requirePasswordOnStart">
                    <input
                      id="requirePasswordOnStart"
                      type="checkbox"
                      formControlName="requirePasswordOnStart"
                      (change)="updateRequirePasswordOnStart()"
                    />
                    {{ "requirePasswordOnStart" | i18n }}
                  </label>
                </div>
                <small class="help-block form-group-child" *ngIf="isWindows">{{
                  "recommendedForSecurity" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="approveLoginRequests">
                    <input
                      id="approveLoginRequests"
                      type="checkbox"
                      formControlName="approveLoginRequests"
                      (change)="updateApproveLoginRequests()"
                    />
                    {{ "approveLoginRequests" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "approveLoginRequestDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAccountPreferences = !showAccountPreferences"
                [attr.aria-expanded]="showAccountPreferences"
              >
                <i
                  *ngIf="!showAccountPreferences"
                  class="bwi bwi-angle-right bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showAccountPreferences"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                {{ "accountPreferences" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showAccountPreferences">
              <div class="form-group">
                <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
                <select
                  id="clearClipboard"
                  aria-describedby="clearClipboardHelp"
                  formControlName="clearClipboard"
                  (change)="saveClearClipboard()"
                >
                  <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
                    {{ o.name }}
                  </option>
                </select>
                <small id="clearClipboardHelp" class="help-block">{{
                  "clearClipboardDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="minimizeOnCopyToClipboard">
                    <input
                      id="minimizeOnCopyToClipboard"
                      type="checkbox"
                      aria-describedby="minimizeOnCopyToClipboardHelp"
                      formControlName="minimizeOnCopyToClipboard"
                      (change)="saveMinOnCopyToClipboard()"
                    />
                    {{ "minimizeOnCopyToClipboard" | i18n }}
                  </label>
                </div>
                <small id="minimizeOnCopyToClipboardHelp" class="help-block">{{
                  "minimizeOnCopyToClipboardDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableFavicons">
                    <input
                      id="enableFavicons"
                      type="checkbox"
                      aria-describedby="enableFaviconsHelp"
                      formControlName="enableFavicons"
                      (change)="saveFavicons()"
                    />
                    {{ "enableFavicon" | i18n }}
                  </label>
                </div>
                <small id="enableFaviconsHelp" class="help-block">{{ "faviconDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAppPreferences = !showAppPreferences"
                [attr.aria-expanded]="showAppPreferences"
              >
                <i
                  *ngIf="!showAppPreferences"
                  class="bwi bwi-angle-right bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showAppPreferences"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                {{ "appPreferences" | i18n }}
              </button>
            </h2>
            <ng-container *ngIf="showAppPreferences">
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableTray">
                    <input
                      id="enableTray"
                      type="checkbox"
                      aria-describedby="enableTrayHelp"
                      formControlName="enableTray"
                      (change)="saveTray()"
                    />
                    {{ enableTrayText }}
                  </label>
                </div>
                <small id="enableTrayHelp" class="help-block">{{ enableTrayDescText }}</small>
              </div>
              <div class="form-group" *ngIf="showMinToTray">
                <div class="checkbox">
                  <label for="enableMinToTray">
                    <input
                      id="enableMinToTray"
                      type="checkbox"
                      aria-describedby="enableMinToTrayHelp"
                      formControlName="enableMinToTray"
                      (change)="saveMinToTray()"
                    />
                    {{ enableMinToTrayText }}
                  </label>
                </div>
                <small id="enableMinToTrayHelp" class="help-block">{{
                  enableMinToTrayDescText
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableCloseToTray">
                    <input
                      id="enableCloseToTray"
                      type="checkbox"
                      aria-describedby="enableCloseToTrayHelp"
                      formControlName="enableCloseToTray"
                      (change)="saveCloseToTray()"
                    />
                    {{ enableCloseToTrayText }}
                  </label>
                </div>
                <small id="enableCloseToTrayHelp" class="help-block">{{
                  enableCloseToTrayDescText
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="startToTray">
                    <input
                      id="startToTray"
                      type="checkbox"
                      aria-describedby="startToTrayHelp"
                      formControlName="startToTray"
                      (change)="saveStartToTray()"
                    />
                    {{ startToTrayText }}
                  </label>
                </div>
                <small id="startToTrayHelp" class="help-block">{{ startToTrayDescText }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="openAtLogin">
                    <input
                      id="openAtLogin"
                      type="checkbox"
                      aria-describedby="openAtLoginHelp"
                      formControlName="openAtLogin"
                      (change)="saveOpenAtLogin()"
                    />
                    {{ "openAtLogin" | i18n }}
                  </label>
                </div>
                <small id="openAtLoginHelp" class="help-block">{{
                  "openAtLoginDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="showAlwaysShowDock">
                <div class="checkbox">
                  <label for="alwaysShowDock">
                    <input
                      id="alwaysShowDock"
                      type="checkbox"
                      aria-describedby="alwaysShowDockHelp"
                      formControlName="alwaysShowDock"
                      (change)="saveAlwaysShowDock()"
                    />
                    {{ "alwaysShowDock" | i18n }}
                  </label>
                </div>
                <small id="alwaysShowDockHelp" class="help-block">{{
                  "alwaysShowDockDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableBrowserIntegration">
                    <input
                      id="enableBrowserIntegration"
                      type="checkbox"
                      aria-describedby="enableBrowserIntegrationHelp"
                      formControlName="enableBrowserIntegration"
                      (change)="saveBrowserIntegration()"
                    />
                    {{ "enableBrowserIntegration" | i18n }}
                  </label>
                </div>
                <small id="enableBrowserIntegrationHelp" class="help-block">{{
                  "enableBrowserIntegrationDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableBrowserIntegrationFingerprint">
                    <input
                      id="enableBrowserIntegrationFingerprint"
                      type="checkbox"
                      aria-describedby="enableBrowserIntegrationFingerprintHelp"
                      formControlName="enableBrowserIntegrationFingerprint"
                      (change)="saveBrowserIntegrationFingerprint()"
                    />
                    {{ "enableBrowserIntegrationFingerprint" | i18n }}
                  </label>
                </div>
                <small id="enableBrowserIntegrationFingerprintHelp" class="help-block">{{
                  "enableBrowserIntegrationFingerprintDesc" | i18n
                }}</small>
              </div>
              <div class="form-group" *ngIf="showDuckDuckGoIntegrationOption">
                <div class="checkbox">
                  <label for="enableDuckDuckGoBrowserIntegration">
                    <input
                      id="enableDuckDuckGoBrowserIntegration"
                      type="checkbox"
                      formControlName="enableDuckDuckGoBrowserIntegration"
                      (change)="saveDdgBrowserIntegration()"
                    />
                    {{ "enableDuckDuckGoBrowserIntegration" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{
                  "enableDuckDuckGoBrowserIntegrationDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <label for="theme">{{ "theme" | i18n }}</label>
                <select
                  id="theme"
                  aria-describedby="themeHelp"
                  formControlName="theme"
                  (change)="saveTheme()"
                >
                  <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small id="themeHelp" class="help-block">{{ "themeDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <label for="locale">{{ "language" | i18n }}</label>
                <select
                  id="locale"
                  aria-describedby="localeHelp"
                  formControlName="locale"
                  (change)="saveLocale()"
                >
                  <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small id="localeHelp" class="help-block">{{ "languageDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
      </div>
    </div>
  </div>
</div>
